<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">


<h:head>
	<link href="../css/styleButton.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
body {
	width: 950px;
	background-image: url("../images/bg-logon.gif");
	margin: 0 auto;
	padding-top: 55px;
}

td {
	font-weight: bold;
}

input {
	width: 310px;
	height: 28px;
	font-weight: normal;
}

.error {
	color: red;
}

#formLogon {
	float: right;
	background-color: #E6E6E6;
	width: 380px;
	margin-bottom: 15px;
}
</style>
</h:head>
<h:body>

	<h:link outcome="index.jsf">
		<img src="../images/photoshop_image.gif" alt="Loading........"
			style="width: 480px; margin-left: -20px;"></img>
	</h:link>

	<div id="formLogon">
		<fieldset style="width: 370px; border: none;">
			<legend style="font-weight: bold; font-size: 19px; padding-top: 8px;">Logon</legend>
			<h:form>
				<h:panelGrid>
					<h:outputText value="Your name"></h:outputText>

					<h:panelGroup>
						<p:inputText style="width:145px;margin-right:15px;"
							value="#{userBean.userVO.lastName}" />
						<p:inputText style="width:145px;" id="fN"
							value="#{userBean.userVO.firstName}" />
					</h:panelGroup>

					<h:message styleClass="error" for="fN"></h:message>

					<h:outputText value="User name"></h:outputText>

					<p:inputText id="uN" value="#{userBean.userName}" required="true"
						requiredMessage="User name is required"
						validatorMessage="Username must be between 5 and 16">
						<f:validateLength minimum="5" maximum="16" />
					</p:inputText>

					<h:message styleClass="error" for="uN"></h:message>

					<h:outputText value="Password"></h:outputText>

					<p:password id="pS" value="#{userBean.userVO.password}"
						feedback="true" label="Password" inline="true" required="true"
						requiredMessage="Password is required" match="cPS">
					</p:password>

					<h:message styleClass="error" for="pS"></h:message>

					<h:outputText value="Confirm Password"></h:outputText>

					<p:password id="cPS" value="#{userBean.userVO.password}"
						label="Confirm Password" required="true"
						requiredMessage="Confirm Password is required" />

					<h:message styleClass="error" for="cPS"></h:message>

					<h:outputText value="Email"></h:outputText>

					<p:inputText id="em" value="#{userBean.userVO.email}"
						required="true" requiredMessage="Email is required"
						validatorMessage="Email is not correct format!">
						<f:validateRegex
							pattern="^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$" />
					</p:inputText>

					<h:message for="em" styleClass="error"></h:message>

					<h:outputText value="Birthday"></h:outputText>

					<h:panelGroup>
						<p:inputText value="#{userBean.userVO.day}" id="day"
							style="width:50px;margin-right:5px;"></p:inputText>

						<p:selectOneMenu style="width:115px;margin:0 5px 0 0;" id="month"
							value="#{userBean.userVO.month}">
							<f:selectItems value="#{userBean.userVO.months}"></f:selectItems>
						</p:selectOneMenu>

						<p:inputText style="width:126px;" id="year"
							value="#{userBean.userVO.year}"></p:inputText>
					</h:panelGroup>


					<h:outputText value="Sex"></h:outputText>

					<p:selectOneMenu value="#{userBean.userVO.sex}"
						style="width:330px;margin-bottom:15px;">
						<f:selectItem itemLabel="Male" itemValue="Male"></f:selectItem>
						<f:selectItem itemLabel="Female" itemValue="FeMale"></f:selectItem>
						<f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
					</p:selectOneMenu>

					<h:panelGroup>
						<h:commandButton action="#{userBean.logon}" value="Register"
							styleClass="styleButton"></h:commandButton>
						<h:button outcome="logon.jsf" value="Back"
							styleClass="styleButton"></h:button>
					</h:panelGroup>

				</h:panelGrid>

			</h:form>
		</fieldset>
	</div>



</h:body>
</html>